import { InfoOutline } from '@pxxtech/icons';
import { Form, Button, Input, Switch } from '@pxxtech/mobile';
import { DemoBlock } from 'demos';

export default () => {
  const onFinish = (values: any) => {
    console.log(values);
  };

  const [form] = Form.useForm();

  return (
    <div style={{ background: '#f5f7fa', height: '100%' }}>
      <DemoBlock
        title="基础用法"
        padding="0"
        border="none"
        background="transparent"
      >
        <Form
          form={form}
          onFinish={onFinish}
          style={{
            '--item-mb': '4px',
            '--item-pa': '12px',
            '--prefix-width': '4em',
            background: '#fff',
          }}
          footer={
            <Button block color="primary" onClick={form.submit}>
              提交
            </Button>
          }
        >
          <Form.Item
            name="姓名"
            label="姓名"
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="address" label="地址">
            <Input placeholder="请输入地址" />
          </Form.Item>

          <Form.Item name="disabledField" label="禁用" disabled>
            <Input placeholder="禁止输入" />
          </Form.Item>

          <Form.Item
            label="带解释图标"
            name="tooltip"
            tooltip="This is a tooltip field"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="自定义解释图标"
            name="customize_tooltip"
            tooltip={{
              icon: <InfoOutline />,
              onClick: () => {
                window.alert('Tooltip with customize icon');
              },
            }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="必填带解释图标"
            name="required_tooltip"
            tooltip="This is a required field"
            rules={[{ required: true, message: '必填带解释图标' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="自定义解释图标2"
            name="customize_tooltip_2"
            tooltip={
              <span
                style={{
                  flex: 1,
                  textAlign: 'right',
                  color: 'var(--pxx-color-primary)',
                }}
              >
                自定义解释图标2
              </span>
            }
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="horizontal"
            label="假名"
            layout="horizontal"
            rules={[{ required: true, message: '假名不能为空' }]}
          >
            <Input style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item
            name="checkbox"
            label="条款"
            layout="horizontal"
            style={{ '--align-items': 'flex-end' }}
            rules={[
              {
                validator(_, v) {
                  if (v === true) {
                    return Promise.resolve();
                  }
                  return Promise.reject('必须同意条款');
                },
              },
            ]}
          >
            <Switch />
          </Form.Item>
        </Form>
      </DemoBlock>
    </div>
  );
};
